<template>
  <div class="country_list">
    <!--<p class='main_title' @click="">实体列表 <span class='close' @click='closeModal(1)'></span></p>-->
  </div>
</template>

<script>
import "./countryList.less";
import storeData from "./../../../tools/vuex-store";
import axios from "axios";
export default {
  name: "country-list",
  components: {},
  props: ["list", "chooseMap", "closeModal", "showTreeModal", "zTreeClick"],
  conutry: ["parameter:"],
  data() {
    return {
      env: process.env.NODE_ENV,
      isActive: 0,
      zTree: {},
      myList: this.list,
      zTreeTools: "list",
      setting: {
        async: {
          enable: true,
          url: this.$store.state.ajaxApi + "api/entityList/queryEntityList",
          headers: { token: sessionStorage.token },
          // contentType: 'application/json;charset=UTF-8',
          autoParam: ["id", "rank", "state", "superiorId", "label_name"],
          // autoParam: ['id', 'serialNumber', 'rank', 'state'],
          type: "get",
          dataFilter: function (treeId, parentNode, responseData) {
            console.log(parentNode);
            console.log(responseData);
            // if (
            //   parentNode !== undefined &&
            //   parentNode.stateName === "美国" &&
            //   parentNode.name === "舰艇"
            // ) {
            //   // responseData = [];
            //   for (const i in responseData.rows) {
            //     if (
            //       responseData.rows[i].name !== "复仇者号扫雷舰" ||
            //       responseData.rows[i].name !== "蓝岭号两栖登陆指挥舰"
            //     ) {
            //       delete responseData.rows[i];
            //     }
            //   }
            // }
            // const attr = storeData.state.serialNumber;
            // console.log(attr);
            // for (const i of responseData.rows) {
            //   for (const j in attr) {
            //     if (i.serialNumber === attr[j]) {
            //       i.checked = true;
            //     }
            //   }
            // }
            if (parentNode) {
              let rows = [];
              //   if(parentNode.level==0){
              //     //放入模型目录
              //  for (const i in responseData) {
              //    let attr=responseData[i].attrs;
              //    let obj={};
              //    obj['position']=[];
              //    obj['serialNumber']=responseData[i].id;
              //    obj['iconSize']=[34,34];
              //    obj['className']= "point-icon";
              //   for (const ai of attr) {
              //     if(ai.name=='基地简介'){
              //       obj.troopsForm=ai.value;
              //     }else if(ai.name=='名称'){
              //        obj.labelName=ai.value;
              //        obj.name=ai.value;
              //     }else if(ai.name=='纬度'){
              //        obj.position[0]=Number(ai.value);
              //     }else if(ai.name=='经度'){
              //         obj.position[1]=Number(ai.value);
              //     }else if(ai.name=='驻地'){
              //         obj.state=ai.value;
              //     }
              //   }
              //   rows.push(obj);
              //  }
              //  return rows;
              //   }
              for (const i in responseData) {
                let attr = responseData[i].attrs;
                let obj = {};
                obj["position"] = [];
                obj["serialNumber"] = responseData[i].id;
                obj["iconSize"] = [34, 34];
                obj["className"] = "point-icon";
                obj["troopsForm"] = ""; //下属番队
                obj["coordinate"] = ""; //坐标
                for (const ai of attr) {
                  if (ai.name == "基地简介") {
                    obj.troopsForm = ai.value;
                  } else if (ai.name == "名称") {
                    obj.labelName = ai.value;
                    obj.name = ai.value;
                  } else if (ai.name == "纬度") {
                    obj.position[0] = Number(ai.value);
                  } else if (ai.name == "经度") {
                    obj.position[1] = Number(ai.value);
                  } else if (ai.name == "驻地") {
                    obj.state = ai.value;
                  } else if (ai.name == "坐标") {
                    obj.coordinate = ai.value;
                  }
                }
                rows.push(obj);
              }
              return rows;
            }
            console.log(responseData.rows);
            return responseData.rows;
          },
        },
        check: {
          enable: true,
        },
        data: {
          simpleData: {
            enable: true,
          } /*,
                        key: {
                            name: 'name_chs'
                        }*/,
        },
        view: {
          fontCss: { color: "#fff", "font-size": "2rem!important" },
          showIcon: function (treeId, treeNode) {
            return treeNode.iconSkin !== undefined;
            // return true;
            // return parseInt(treeNode.pid) !== 2;
          },
        },
        callback: {
          onCheck: this.zTreeCheck,
          onClickModel: this.zTreeModelClick, //点击模型
          onRightClick: this.zTreeOnRightClick,
          onIconClick: this.zTreeOnIconClick, //点击图标
          A: this.zTreeOnClick,
          onAsyncTone: this.zTreeSuccess,
          // onAsyncError: function () {
          //   window.location.href =
          //     this.env === "production" ? "./#login" : "/#login";
          // },
        },
      },
    };
  },
  mounted() {
    this.$store.state.globalVariable.countryList = this;
    this.create_tree(this.zTreeTools);
    // console.log(this.myList);
    /*            this.$store.dispatch('ajax', {
                            url: 'api/entityList/queryEntityList', method: 'post', succeed: (res)=> {
                               console.log(res);
                            }
                        });*/
    // this.webSocketServer();
    let tmpParam = {
      node: {
        where: {
          bool_and: [
            {
              "国家.equals": "美国",
            },
          ],
        },
      },
      relationship: {
        where: {
          bool_and: [],
        },
      },
    };
    // axios
    //   .post(
    //     "http://192.168.1.179:9881/services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships/%E5%9F%BA%E5%9C%B0/_search?page=1&size=20",
    //     tmpParam
    //   )
    //   .then(function (response) {
    //     console.log(response);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
  },
  beforeUpdate() {},
  showIconForTree(treeId, treeNode) {
    // console.log(treeNode);
    return treeNode.level === 3;
  },
  updated() {},
  methods: {
    create_tree(skip) {
      let title = "实体列表";
      let apiUrl = this.setting;
      if (skip === "list") {
        apiUrl.async.url =
          // this.$store.state.ajaxApi + "api/entityList/queryEntityList";
          "/public/surroundings.json";
        apiUrl.async.autoParam = [
          "id",
          "rank",
          "state",
          "superiorId",
          "label_name",
        ];
      } else if (skip === "identical") {
        title = "航母编队";
        apiUrl.async.url =
          this.$store.state.ajaxApi +
          `api/services/app-zonghe/api/example/g6_dataformat/nodes_and_relationships /${节点类型}/_search?page=1&size=20`;
        apiUrl.async.autoParam = ["id", "serialNumber", "rank", "state"];
      } else {
        title = "航母编队";
        apiUrl.async.url =
          this.$store.state.ajaxApi + "api/entityList/querAircraftCarrier";
        apiUrl.async.autoParam = ["id", "serialNumber", "rank", "state"];
      }

      let detailHtml = `<div class='main_body'>
                            <ul id='treeDemo' class='ztree'></ul>
                    </div>`;
      $(".country_list").html(
        storeData.actions.defaultNzmodatl({
          title: `${title}`,
          // title: `${title}<i onclick="mainVue.$store.dispatch('getMainVue')" style="margin-left: 6px;cursor: pointer;" class="iconfont icon-state"></i>`,
          html: detailHtml,
          serNum: 0,
        })
      );
      this.zTree = $.fn.zTree.init($("#treeDemo"), apiUrl);
      // console.log(this.zTree);
    },
    zTreeCheck(e, id, node) {
      // console.log(e);
      console.log('0000勾选');
      let nodes = this.zTree.getCheckedNodes();
      console.log(nodes);
      this.$emit("chooseMap", Object.assign([], node));
    },
    //点击图标
    zTreeOnIconClick(e, srcEvent, treeId, node, clickFlag) {
      // console.log(e);
      this.$emit("transferPosition", e, treeId, "icon");
    },
    zTreeSuccess(event, treeId, node, msg) {
      // console.log(msg);
      if (msg.data.length == 0) {
        this.$message({
          message: "暂无数据，请切换其他模型",
          type: "warning",
        });
      }
    },
    //点击弹出模型选择框
    zTreeModelClick(e, srcEvent, treeId, node, clickFlag) {
      // console.log(e);
      this.$emit("transferPosition", e, treeId, "model");
    },
    zTreeOnRightClick(event, treeId, treeNode) {
      this.$emit("showTreeModal", treeNode);
    },
    zTreeOnClick(event, treeId, treeNode) {
      if (treeNode.checked) {
        this.$emit("zTreeClick", treeNode);
      }
    },
    hideTreemodal() {
      this.$emit("showTreeModal");
    },
    hoverMove(name) {
      this.myList.forEach((item, i) => {
        if (item.name === name) {
          this.isActive = i;
        }
      });
    },
  },
};
</script>